<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        /* 
            盒子模型：多用于块元素，上右下左
            margin：外边距，元素在垂直方向上的外边距会重合
                元素居中：1块元素 2固定宽度   margin:0 auto;
            border：边框，至少要设置边框的样式，才会显示
            padding：内边距，边框到内容的距离，不会针对某一个元素设置
         */
        .first {
            background-color: tomato;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            /* margin-bottom: 15px;
            margin-right: 20px; */
            /* 上下和左右 */
            /* margin:30px 10px; */
            /* 上右下左 */
            /* margin:10px 20px 30px 40px; */
            display: inline-block;
        }

        .second {
            background-color: yellowgreen;
            width: 200px;
            height: 200px;
            margin-top: 15px;
        }

        .child {
            background-color: yellow;
            width: 100px;
            height: 100px;
            /* 没有垂直方向上的自动居中 */
            margin: 0 auto;
            border: 10px solid green;
            /* padding-left: 10px;
            padding-top: 8px; */
            padding: 20px;
            /* 盒子默认的解析方式 */
            /* box-sizing: content-box; */
            /* 不会被边框和内边距撑开 */
            box-sizing: border-box;
            /* 圆角边框 */
            border-radius: 50%;
            /* border-radius: 20px; */
            /* border-radius: 10px 20px 30px 40px; */
            /* border-top: 10px solid red;
            border-right: purple 20px dashed;
            border-bottom: dotted 30px blue;
            border-left: deeppink 40px double; */
            /* border-right-color: teal;
            border-right-width: 3px;
            border-right-style: solid; */
        }

        .test {
            background-color: rosybrown;
            width:100px;
            height:100px;
            /* 尽量在水平方向上对行内元素设置盒子模型相关设置 */
            margin-left: 8px;
            margin-bottom: 10px;
            padding-left: 5px;
            /* display: none; */
            /* 
                行内块；
                1让行内元素拥有块级元素的属性，比如宽高 
                2让块元素可以排在一行 
                3最大缺点是会有默认的外边距
            */
            display: inline-block;
        }
    </style>
</head>

<body>
    <span class="test">烤鸭</span>
    <div class="first">
        <div class="child">
            <div>大盘鸡</div>
            <span>1</span>
        </div>
    </div>
    <div class="second"></div>

</body>

</html>